<template>
  <el-card style="max-width: 400px;max-height: 500px;">
    <template #header>
      <div class="card-header">
        <span>环比</span>
      </div>
    </template>
    <div ref="chartContainer" style="width: 350px; height: 400px"></div>
  </el-card>
</template>

<script setup>
import { useI18n } from "vue-i18n";
import { useRoute, useRouter } from "vue-router";
import * as echarts from "echarts";
import { onMounted } from "vue";

const router = useRouter();
const route = useRoute();
const { t } = useI18n();

//获取节点
const chartContainer = ref(null);

onMounted(() => {
  const myChart = echarts.init(chartContainer.value);
  const option = {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 10,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
    ],
  };
  myChart.setOption(option);
});

//登录
const Login = () => {
  // 存相关的身份信息
  // router.push('')
};
</script>
<style></style>
